<template>
  <div
    :class="{ 'ui-container-full': true, 'ui-container-full-standard': layout == 'standard' && $router.currentRoute.name == 'index' }"
    ref="positionInfo"
  >
    <div class="ui-container-full__con"></div>
    <div class="ui-container-full__body" ref="body">
      <div v-if="$slots.header" class="ui-container-full__header" ref="header">
        <slot name="header" />
        <!-- <div class="line"></div> -->
      </div>
      <div class="ui-container-full__body-main">
        <slot />
      </div>
      <ui-bottom-bar v-if="layout != 'standard' && !singlePage"></ui-bottom-bar>
    </div>

    <div v-if="$slots.footer" class="ui-container-full__footer" ref="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
import scroll from './mixins/normal';
import uiBottomBar from '@/layout/header-aside/components/bottom-bar';
import { mapState } from 'vuex';
export default {
  name: 'ui-container-full',
  components: {
    uiBottomBar,
  },
  mixins: [scroll],
  mounted() {
    // 增加滚动事件监听
    this.addScrollListener();
  },
  beforeDestroy() {
    // 移除滚动事件监听
    this.removeScrollListener();
  },
  computed: mapState('vxadmin/layout', ['layout', 'singlePage']),
};
</script>
<style lang="scss">
.ui-container-full {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 1px 10px 0px rgba(0, 21, 41, 0.07);

  .aside--logo {
    margin-right: 5px;
  }
  &con {
    width: 100%;
    height: auto;
  }

  &__header {
    display: inline-block;
    width: auto;
    // height: 10px;
    position: inherit;
    min-width: 44px;
    padding-right: 0px !important;
    padding: 0 0 30px 0;
    background: #fff;

    > div {
      height: 29px;
      font-size: 20px;
      text-align: left;
      color: #333333;
      line-height: 26px;
      letter-spacing: 0px;
    }
    .line {
      display: block;
      width: auto;
      height: 10px;
      min-width: 100%;
      background: #cccccc;
      position: inherit;
      margin-top: -9px;
    }
  }

  &__body {
    flex-grow: 1;
    padding: 20px 20px;
    // overflow: auto;
    background: rgba(#fff, 0.9);
  }

  &__footer {
    padding: 20px;
    border-top: 1px solid #e2e4ea;
    background: #fff;
  }
  .ui-container-full__body-main {
    min-height: 75%;
  }
  .ui-container-full-bottom-bar {
    position: relative;
    top: 10%;
  }
}
.ui-container-full-standard {
  background: none;
  border-width: 0;
  .ui-container-full__body {
    min-height: 100px;
    background: none;
  }
}
</style>
